<script setup>
import * as api from '@/api/public';
import * as user from '@/api/sys/user'
import {ElMessage, ElMessageBox} from 'element-plus';
import {reactive, ref} from 'vue';
import ComponentsBox from './components/ComponentsBox.vue';
import EditDialog from './components/EditDialog.vue';
import ImportExcel from './components/ImportExcel.vue';
import store from "@/store/index.js";
import router from "@/router/index.js";

// 列表数据
const list = reactive({data: []})

// 详情弹窗数据
const gridData = reactive([]);

// 分页器参数
let pageSize = ref(10);
let currentPage = ref(1);
let total = ref(0);

// form表单类============
let form = ref({})
// ==============

let dialogVisible = ref(false);
let dialogTableVisible = ref(false);
const importExcelVisible = ref(false);

// 初始化
const init = (p) => {
  user.getData({
    ...p,
    page: currentPage.value,
    size: pageSize.value
  }).then(res => {
    console.log('=================', res)
    list.data = res.data
    total.value = res.total;
  })
}

init()

// 弹窗
const dialog = (v) => {
  router.push({
    path: '/resident/edit',
    query: {id: v.id ,
      realName: v.realName,
      sex: v.sex
    }
  })
  // form.value = v;
  // dialogVisible.value = true;
}

// 查看详情方法
const detail = (data) => {
  gridData.length = 0;
  gridData.push(data);
  dialogTableVisible.value = true;
}

// 删除方法
const del = (id) => {
  ElMessageBox.confirm('请确认删除...', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    api.remove({id: id}, '/user').then((res) => {
      ElMessage({
        message: res.msg,
        type: 'success'
      })
      init()
    })
  })
}

const resetPassword = (id) => {
  ElMessageBox.prompt('请输入重置密码', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(({value}) => {
    user.resetPassword({
      id: id,
      password: value
    }).then((res) => {
      ElMessage({
        message: res.msg,
        type: 'success'
      })
      init()
    })
  })
}

const query = (v) => {
  init(v)
}

const exportExcel = () => {
  user.exportExcel()
}

const pageChange = (v) => {
  currentPage.value = v;
  init();
}

const pageSizeChange = (v) => {
  pageSize.value = v;
  init();
}
</script>
<template>
  <div class="container">
    <div class="head">
      <!-- 查询功能组件 -->
      <ComponentsBox @query="query"></ComponentsBox>
      <div class="bottom">
        <!-- 添加按钮 -->
        <el-button type="primary" @click="">新增住户</el-button>
        <el-button type="primary" @click="">导入住户信息</el-button>
        <el-button type="primary" @click="">下载导入模板</el-button>
        <el-button type="primary" @click="">导出住户信息</el-button>
      </div>
    </div>
    <div class="middle">
      <!-- 表格 -->
      <el-table v-loading="store.state.loaded" :data="list.data" border style="width: 100%">
        <el-table-column fixed type="index" label="序号" width="60"/>
        <el-table-column prop="username" label="姓名"/>
        <el-table-column prop="realName" label="性别"/>
        <el-table-column prop="phone" label="电话"/>
        <el-table-column prop="nickName" label="创建时间" width="150"/>
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button type="primary" size="small" @click="detail(scope.row)">住户档案</el-button>
            <el-button type="primary" size="small" @click="dialog(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <!-- 分页器 -->
      <el-pagination background style="margin-top: 10px; width: 100%;"
                     layout="prev, pager, next, jumper, total, sizes"
                     :page-size="pageSize"
                     :page-sizes="[10, 20, 30]"
                     :current-page="currentPage"
                     @current-change="pageChange"
                     @size-change="pageSizeChange"
                     :total="total"/>
    </div>
    <!-- 编辑弹窗 -->
    <edit-dialog @success="init" :data="form" v-model="dialogVisible"/>
    <!-- 导入excel -->
    <ImportExcel @success="init" v-model="importExcelVisible"/>
    <!-- 详情弹窗 -->
    <el-dialog v-model="dialogTableVisible" title="详情">
      <el-table :data="gridData">
        <el-table-column prop="username" label="用户名" width="180"/>
        <el-table-column prop="realName" label="真是名称" width="180"/>
        <el-table-column prop="phone" label="电话"/>
        <el-table-column prop="nickName" label="昵称"/>
        <el-table-column prop="sex" label="性别"/>
        <el-table-column prop="deptName" label="部门"/>
        <el-table-column prop="createTime" label="创建时间" width="150"/>
        <el-table-column prop="updateTime" label="修改时间" width="150"/>
      </el-table>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;

  .head {
    margin-bottom: 6px;

    .bottom {
      display: flex;
    }
  }

  .middle {
    margin-bottom: 12px;
  }
}
</style>
